<template>
  <h1>牙齿评估</h1>
  <h3>使用方法</h3>
  <p>上传模型后，系统会生成按牙齿分割的结果以及每颗牙牙周的病变程度估计数据</p>
  <p>上传模型的要求：模型为ply数据，且要求颜色信息分布在面上，可采用MeshLab进行模型格式的修正</p>
  <p>MeshLab下载地址：<el-link href="https://www.meshlab.net/" style="font-size: 18px" type="primary">MeshLab</el-link></p>
  <el-divider/>
    <el-form>
        <el-form-item label="用户邮箱" :label-width="label_width">
            <el-input v-model="patient_email" autocomplete="off"/>
        </el-form-item>
      <el-form-item label="牙齿名称" :label-width="label_width">
        <el-input v-model="teeth_name" autocomplete="off"/>
      </el-form-item>
        <el-form-item label="牙齿种类" :label-width="label_width">
            <el-radio-group v-model="teeth_type">
                <el-radio label=1>上牙</el-radio>
                <el-radio label=2>下牙</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>
  <div style="margin-left: 200px; margin-right: 200px">
      <el-upload
              drag
              :file-list="fileList"
              :auto-upload="false"

              :limit="1"
              :on-change="test"
              action="#"
      >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
              拖拽文件至此或<em>点击上传</em>
          </div>
          <template #tip>
              <div class="el-upload__tip">
                  请上传符合要求的ply格式文件
              </div>
          </template>
      </el-upload>
  </div>
</template>

<script>
import {UploadFilled} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

export default {
    name: "EstimateTeeth",
    components: {UploadFilled},
    data() {
        return {
            label_width: '80px',
            patient_email: '',
            teeth_type: 0,
          teeth_name: '',
            fileList: []
        }
    },
    methods: {
        test: function () {
            console.log('xxx')
        },
        uploadHttpRequest() {
            if (this.fileList.length === 0) {
                ElMessage({
                    message: "未添加文件",
                    type: "error"
                })
                return
            }
            let uploadForm = {
                file: this.fileList[0].raw,
                user_email: this.patient_email,
                teeth_type: this.teeth_type,
              teeth_name: this.teeth_name
            }

        }
    }
}
</script>

<style scoped>
h1 {
    font-size: 30px;
}
h3 {
    font-size: 24px;
    text-align: start;
    color: dimgray;
}
p, ul {
    font-size: 18px;
    text-align: start;
}
</style>